import React, { Component } from "react";
import {
    apiShopOrderDetail,
} from "@/request/orderManagement";

import { Steps, Row, Col, Descriptions, Typography, Anchor, Input, Modal } from "antd";
import "../style/style.less";
import TheImage from "@/components/TheImage";

import _ from "lodash";
import userAvatar from '@/assets/images/zhanwei_head.svg'

const { Step } = Steps;
const { Title } = Typography;

class SelfLogistics extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isModalOpen: false
        }
    }
    openModal = (orderId) => {
        this.setState({
            isModalOpen: true
        },async()=>{
            const response = await apiShopOrderDetail({ orderId });
            if (response.code === 0) {
                const dataSource = response.data;
                let progressList = [], deliveryTask = null
                if (dataSource && dataSource.deliveryTask && dataSource.deliveryTask.progressList) {
                    progressList = dataSource.deliveryTask.progressList
                    for (let key in progressList) {
                        switch (progressList[key].taskStatus) {
                            case 1:
                                progressList[key].taskStatus = "待开始";
                                break;
                            case 2:
                                progressList[key].taskStatus = "配送中";
                                break;
                            case 3:
                                progressList[key].taskStatus = "已送达";
                                break;
                            case 4:
                                progressList[key].taskStatus = "配送员取消";
                                break;
                            case 5:
                                progressList[key].taskStatus = "用户取消";
                                break;
                        }
                    }
                }
                if (dataSource && dataSource.deliveryTask) {
                    deliveryTask = dataSource.deliveryTask
                }
                this.setState({
                    progressList,
                    deliveryTask,
                });
            }
        })
    }
    handleCancel = () => {
        this.setState({
            isModalOpen: false
        })
    }
    render() {
        const {
            progressList,
            deliveryTask,
            isModalOpen
        } = this.state;
        return (
            <Modal
                className={"order-details"}
                width={'75%'}
                title="查看物流"
                visible={isModalOpen}
                destroyOnClose={true}
                maskClosable={false}
                onCancel={this.handleCancel}
                footer={false}
            >
                <div className={"order-details-content"}>
                    <div className={"order-details-title"}>配送信息</div>
                    <Row style={{padding: "0 20px"}}>
                        <Col span={6} style={{ height: 500, overflowY: 'auto' }}>
                            <Title level={5}>任务进度</Title>
                            <Steps progressDot current={progressList ? progressList.length : 1} direction="vertical">
                                {
                                    _.map(progressList, (item, i) => {
                                        return <Step title={item.taskStatus}
                                                     description={[item.createTime, <br/>, item.progressDescription]}/>
                                    })
                                }
                            </Steps>
                        </Col>
                        <Col span={10}>
                            <Descriptions title="客户信息" column={1} bordered>
                                <Descriptions.Item label="客户头像">
                                    {
                                        <TheImage
                                            src={deliveryTask && deliveryTask.memberAvatar ? deliveryTask.memberAvatar : userAvatar}
                                            width={100}/>
                                    }
                                </Descriptions.Item>
                                <Descriptions.Item
                                    label="客户ID">{deliveryTask ? deliveryTask.memberId : ""}</Descriptions.Item>
                                <Descriptions.Item
                                    label="客户昵称">{deliveryTask ? deliveryTask.memberName : ''}</Descriptions.Item>
                                <Descriptions.Item
                                    label="手机号">{deliveryTask ? deliveryTask.memberPhone : ''}</Descriptions.Item>
                                <Descriptions.Item
                                    label="收货地址">{deliveryTask ? deliveryTask.endAddress : ''}</Descriptions.Item>
                            </Descriptions>
                        </Col>
                        <Col span={6} offset={2}>
                            <Descriptions title="配送员信息" column={1} bordered>
                                <Descriptions.Item
                                    label="配送员UID">{deliveryTask ? deliveryTask.deliverymanId : ''}</Descriptions.Item>
                                <Descriptions.Item
                                    label="配送员名称">{deliveryTask ? deliveryTask.deliverymanName : ''}</Descriptions.Item>
                                <Descriptions.Item
                                    label="联系方式">{deliveryTask ? deliveryTask.deliverymanPhone : ''}</Descriptions.Item>
                            </Descriptions>
                        </Col>
                    </Row>
                </div>
            </Modal>
        );
    }
}

export default SelfLogistics;
